<script setup>
import { ref, inject, nextTick, onMounted, computed } from "vue";
import { useElementSize, useResizeObserver } from "@vueuse/core";
import { Icon } from "@iconify/vue2";

import {
  activitiInfoStore,
  useActivitiInfo,
} from "@/components/Activiti/ApprovalInfo/hooks/use-activiti-info.js";

import { useTaskInfoTitleLayout } from "@/components/Activiti/ApprovalInfo/hooks/use-task-info-title-layout.js";

/**
 * 工作流数据
 * @description
 * 从依赖注入内获取到的 工作流信息存储值
 * @type { import("vue").Ref< typeof activitiInfoStore > }
 */
const activitiInfo = inject("activitiInfo");

const { taskInfoTitle } = useActivitiInfo(activitiInfo);

console.log(" activitiInfo ", activitiInfo.value);

/** @type {  import("vue").Ref< HTMLDocument | null > }  */
const rootDom = ref(null);

// onMounted(async () => {
//   nextTick(() => {});
// });

/**
 * @description
 * 有疑惑 不会用用vueuse，无法有效的监听，获取到元素的宽高 得到的元素高度都是0
 * @deprecated 不知道怎么更好的，动态的获取到元素的宽高
 */
const buttonLayoutH = computed(() => {
  const { height } = useElementSize(rootDom);
  // console.log(" ? buttonLayoutH ", height.value, rootDom.value);
  return !!height.value ? height.value : 0;
});
</script>

<template>
  <!-- TODO: 需要对接工作流接口数据 显示出合适的标题 -->
  <section class="TaskInfoTitle-root" ref="rootDom">
    <section class="l">
      <section class="icon-box">
        <Icon class="icon" icon="carbon:workflow-automation"></Icon>
      </section>

      <section class="title">
        {{ taskInfoTitle }}
      </section>
    </section>

    <section class="r">
      <section class="layout">
        <slot name="TaskInfoTitleRight"></slot>
      </section>
    </section>
  </section>
</template>

<style lang="scss" scoped>
// @use "@/components/Activiti/ApprovalInfo/styles/var.scss" as var;
// @use "src/components/Activiti/ApprovalInfo/styles/var" as var;

// @import "../../styles/var.scss";
@import "~@/components/Activiti/ApprovalInfo/styles/var.scss";

$icon-size: 55px;

.TaskInfoTitle-root {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;

  // padding: 20px 20px 0;
  padding: $std-gap;

  background-color: $bg-white;

  .l {
    display: flex;
    align-items: flex-start;
    justify-self: flex-start;

    .icon-box {
      display: flex;
      justify-content: center;
      align-items: center;

      width: $icon-size;
      height: $icon-size;
      border-radius: 5px;

      background-color: $main-color;

      .icon {
        color: white;
        font-size: 30px;
        border-radius: 5px;
      }
    }

    .title {
      margin-left: $std-gap;

      display: inline-block;

      font-size: 22px;
      // max-width: calc(100% - 74px);
      // line-height: 1.48;
    }
  }

  .r {
    flex-grow: 1;

    // 右侧内容块 高度目前暂时被左侧的icon所控制
    // 有疑惑 一个行内弹性容器 左侧元素有宽高 自动撑开了内容 但是右侧元素无宽高 如何自动拓展其高度呢？
    height: $icon-size;

    position: relative;

    // 用于布局的选择器
    .layout {
      position: absolute;

      // 参考资料 https://www.jianshu.com/p/3eba945fc19e
      // 在绝对定位中 该配置有助于调试时选中该元素
      pointer-events: auto;

      z-index: 1;

      min-width: 50%;
      min-height: 50%;

      right: -$half-gap;
      bottom: -54px;
    }
  }
}
</style>
